<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card>
        <!-- 添加角色按钮 -->
        <el-row>
            <el-col>
                <el-button @click="showAddCateDialog" type="primary">添加分类</el-button> 
            </el-col>
        </el-row>
        <!-- 表格 -->
        <tree-table class="treetable" :data="catelist" :columns="columns" 
        :selection-type="false" :expand-type="false" :show-index="true"
        index-text="#" border :show-row-hover="false">
        <!-- 是否有效 -->
        <template slot="isok" slot-scope="scope">
            <i class="el-icon-success" v-if="scope.row.cat_deleted === false" 
            style="color: lightgreen"></i>
            <i class="el-icon-error" v-else style="color: red"></i>
        </template>
        <!-- 排序标签 -->
        <template slot="order" slot-scope="scope">
            <el-tag v-if="scope.row.cat_level === 0" size="mini">一级</el-tag>
            <el-tag v-if="scope.row.cat_level === 1" size="mini" type="success">二级</el-tag>
            <el-tag v-if="scope.row.cat_level === 2" size="mini" type="warning">三级</el-tag>
        </template >
        <!-- 按钮 -->
        <template slot="opt" slot-scope="scope">
            <!-- {{scope.row}} -->
            <el-button @click="editCateDialogVisible(scope.row,scope.row.cat_id)" type="primary" size="mini"
             icon="el-icon-edit">编辑</el-button>
            <el-button type="danger" size="mini"
             icon="el-icon-delete" @click="removeCateById(scope.row,scope.row.cat_id)">删除</el-button>
        </template>
        </tree-table>

        <!-- 分页 -->
        <el-pagination @size-change="handleSizeChange"
        @current-change="handleCurrentChange" :current-page="queryInfo.pagenum"
        :page-sizes="[3, 5, 10, 15]" :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
    </el-card>

    <!-- 添加分配的对话框 -->
    <el-dialog title="添加分类" :visible.sync="addCateDialogVisible" width="50%" @close="addCateDialogClosed">
        <!-- 添加分类的表单 -->
        <el-form :model="addCateForm" :rules="addCateFormRules" ref="addCateFormRef" label-width="100px">
            <el-form-item label="分类名称：" prop="cat_name">
                <el-input v-model="addCateForm.cat_name"></el-input>
            </el-form-item>
            <el-form-item label="分类名称：">
                <!-- options 指定数据源  props 用来指定配置对象 v-model将选中的值绑定到input 必须是数组-->
                  <el-cascader
                    v-model="selectedKeys"
                    :options="parentCateList"
                    expandTrigger="hover"
                    :props="cascaderProps"
                    @change="parentCateChange"
                    clearable change-on-select
                    >
                </el-cascader>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="addCateDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addCate">确 定</el-button>
        </span>
    </el-dialog>

    <!-- 编辑分类的对话框 -->
    <el-dialog title="修改分类" :visible.sync="editDialogVisible"
     width="50%"  @close="cateDialogClosed">
         <!-- 内容主体区 -->
        <el-form :model="editForm" :rules="editFormRules" 
        ref="editFormRef" label-width="80px">
            <el-form-item label="分类名称" prop="cat_name">
                <el-input v-model="editForm.cat_name"></el-input>
            </el-form-item>             
        </el-form>
        <!-- 底部区 -->
        <span slot="footer" class="dialog-footer">
            <el-button @click="editDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="editCateInfo">确 定</el-button>
        </span>
    </el-dialog>

  </div>
</template>

<script>
export default {
    data() {
        return {
            // 获取商品分类列表数据的查询条件
            queryInfo: {
                type: 3,
                pagenum: 1,
                pagesize: 5  
            },
            // 总数据条数
            total: 0,
            // 商品分类列表
            catelist: [],
            // 为table指定列的定义
            columns: [{
                label: '分类名称',
                prop: 'cat_name'
            },
            {
                label: '是否有效',    
                // 表示将当前列定义为模板列
                type: 'template',
                // 表示当前这列使用的模板名称
                template:'isok'
            },
            {
                label: '排序',    
                // 表示将当前列定义为模板列
                type: 'template',
                // 表示当前这列使用的模板名称
                template:'order'
            },
            {
                label: '操作',    
                // 表示将当前列定义为模板列
                type: 'template',
                // 表示当前这列使用的模板名称
                template:'opt'
            }
            ],
            // 控制添加分配的对话框的显示与隐藏
            addCateDialogVisible: false,
            // 添加分类的表单数据对象
            addCateForm: {
                // 将要添加的分类名称
                cat_name: '',
                // 父级分类的id
                cat_pid: 0,
                // 分类的等级：默认要添加的是一级分类
                cat_level: 0
            },
            // 添加分类表单的验证规则对象
            addCateFormRules: {
                cat_name: [
                    {
                        required: true,
                        message: '请输入分类名称',
                        trigger:'blur'
                    }
                ]
            },
            // 父级分类的列表
            parentCateList: [],
            // 指定级联选择器的配置对象
            cascaderProps: {
                value: 'cat_id',
                label: 'cat_name',
                children: 'children'
            },
            // 选中的父级分类的id数组
            selectedKeys: [],
            // 控制编辑分类的对话框的显示与隐藏
            editDialogVisible: false,
            editForm: {},
            editFormRules: {
                 // username 表单验证规则  prop="cat_name"
                cat_name: [
                    {
                        required: true,
                        message: '请输入分类名',
                        trigger: 'blur'
                    }
                ]
            },
            // 行 里面的数据
            // CurrCate:{}
            
        }
    },
    created() {
        this.getCateList()
    },
    methods: {
        // 获取商品分类列表数据
        async getCateList() {
            const { data: res } = await this.$http.get('categories', { params: this.queryInfo })
            if (res.meta.status !== 200) {
                return this.$message.error('获取失败')
            }
            // console.log(res);
            this.catelist = res.data.result
            this.total = res.data.total

        },
        // 监听 pagesize 改变
        handleSizeChange(newSize) {
            this.queryInfo.pagesize = newSize
            this.getCateList()
        },
        // 监听 pagenum 改变
        handleCurrentChange(newPage) {
            this.queryInfo.pagenum = newPage
            this.getCateList()
        },
        // 点击按钮添加添加分配的对话框
        showAddCateDialog() {
            // 先获取父级分类的数据列表
            this.getParentCateList()
            // 再展示对话框
            this.addCateDialogVisible = true
            
        },
        // 获取父级分类的数据列表
        async getParentCateList() {
            const {data: res} = await this.$http.get('categories',{params: {type: 2}})
            if (res.meta.status !== 200) {
               return this.$message.error('获取父级分类数据失败')
            }
            // console.log(res);
            this.parentCateList = res.data
        },
        // 选择项发送变化触发函数
        parentCateChange() {
            // console.log(this.selectedKeys);
            // 如果selectedKeys数组中的lenght大于0 则是选中了分类  反之
            if (this.selectedKeys.length > 0) {
                // 为当前父级分类的id赋值
                this.addCateForm.cat_pid = this.selectedKeys[this.selectedKeys.length - 1]
                // 为当前分类的等级赋值
                this.addCateForm.cat_level = this.selectedKeys.length
                return 
            } else {
                // 为当前父级分类的id赋值
                 this.addCateForm.cat_pid = 0
                // 为当前分类的等级赋值
                this.addCateForm.cat_level = 0
            }
            
        },
        // 点击按钮添加新的分类
        addCate() {
            // console.log(this.addCateForm);
            this.$refs.addCateFormRef.validate(async valid => {
                if (!valid) return
                const { data:res } = await this.$http.post('categories', this.addCateForm)
                if (res.meta.status !== 201) {
                    return this.$message.error('添加失败')
                }
                this.$message.success('添加成功')
                this.getCateList()
                this.addCateDialogVisible = false
            })
        },
        // 监听对话框的关闭事件  重置表单数据
        addCateDialogClosed() {
            this.$refs.addCateFormRef.resetFields()
            this.selectedKeys = []
            this.addCateForm.cat_level = 0
            this.addCateForm.cat_pid = 0
        },
        // 点击编辑 显示对话框和数据
        async editCateDialogVisible(cate, id) {
            // this.CurrCate = cate
            const { data:res } = await this.$http.get(`categories/${id}`)
            if (res.meta.status !== 200) {
                return this.$message.error('编辑失败')
            }
            this.editForm = res.data
            this.editDialogVisible = true
        },
        // 编辑后点击确认
        editCateInfo() {
            this.$refs.editFormRef.validate(async valid => {
            if (!valid) return 
            //   发请求
              const { data: res } = await this.$http.put(`categories/${this.editForm.cat_id}`,
                  {
                      cat_name: this.editForm.cat_name,
                  })
              if (res.meta.status !== 200) {
                this.$message.error('修改失败')
              }
                this.$message.success('修改成功') 
                // this.CurrCate.cat_name = res.data.cat_name
            // console.log( this.CurrCate);
            this.getCateList()
            this.editDialogVisible = false
        })
        },
        // 关闭编辑分类的对话框时重置input
        cateDialogClosed() {
            // 重置表单
        this.$refs.editFormRef.resetFields()
        },
        // 点击删除根据ID删除对应分类
        removeCateById(cate, id) {
            // console.log(cate);
        // 弹窗提示 询问是否删除
        this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
            const { data: res } = await this.$http.delete(`categories/${id}`)
            if (res.meta.status !== 200) {
                this.$message.error('删除失败')
            }
            // cate.children = res.data
            this.getCateList()
            this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
        }
         
    }
}
</script>

<style lang="less" scoped>
.treetable{
    margin-top: 15px;
}
.el-cascader{
    width: 100%;
}
</style>